<template>
	<view :class="APP_FONT_SIZE">
		<custom title="个人信息"  mode="2" fixed="fixed"></custom>

		<view>
			<view style="height: 20rpx;"></view>
			

			<view @tap.stop="choose_image" class="" hover-class="click-bg" hover-start-time="50">
				<view class="item-list-box avater-box" style="">
                    <view class="image-box">
                        <image :src="user_info.avatarUrl" ></image>
                    </view>
                    <view class="flex flex-y name-info ml-20">
                        <view class="name fs-30 ">
                            姓名
                        </view>
                        <view class="gray fs-22">
                            昵称
                        </view>
                    </view>
                    
				</view>
			</view>

			<view style="height: 20rpx;"></view>

			<view class="" hover-class="click-bg" hover-start-time="50" @tap.stop="open_remark">
				<view class="item-list-box">
					<view class="flex-1">标签</view>
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>

            <view class="" hover-class="click-bg" hover-start-time="50" @tap.stop="open_remark">
				<view class="item-list-box">
					<view class="flex-1">备注</view>
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>

            <view style="height: 20rpx;"></view>

			<view class="" hover-class="click-bg" hover-start-time="50">
				<view class="item-list-box">
					<view class="flex-2">签名</view>
                    <view class="flex-1 ml-40 gray">
                        未设置个性签名
                    </view>
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>

			<view class="" hover-class="click-bg" hover-start-time="50" @tap.stop="toPage('/pages/user/password')">
				<view class="item-list-box">
					<view class="flex-1">信友圈</view>
					<view></view>
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>
            <view class="fs-28 send-messge"> 发消息 </view>
		</view>

	</view>
</template>

<script>
	let utils = require('../../utils/util');
	export default {
		data() {
			return {
				remark: '',
			}
		},
		methods: {
			logout() {

				this.$refs.toast.open({
					desc: '确定退出登录？',
					left: '我再想想',
					right: '退出',
					success: () => {
						this.less(() => {
							this.request({
								url: '/login/loginOut',
								method: 'POST',
							}).then(res => {

								// uni.$emit('logout');
								this.vuexSet('user_info', {}, true);
								uni.setStorageSync('ACCESS_TOKEN', '');
								uni.redirectTo({
									url: '/pages/login/login'
								})

								if (getApp().globalData.CHAT && getApp().globalData.CHAT
									.CLOSE) {
									getApp().globalData.CHAT.CLOSE();
								}
							});
						})
					}
				});
				uni.setStorage({
					key: 'openid',
					data: '',
				})



			},
			choose_image() {

				utils.upload_one(url => {
					this.request({
						url: '/user/update',
						loading: true,
						data: {
							avatarUrl: url,
							name: this.user_info.name
						},
						method: 'POST',
						loading: true,
					}).then(res => {
						if (res.status == 200) {
							this.showToast('修改成功');
							this.$store.dispatch('refresh_user');
						}
					});
				});


			},
			open_remark() {
				this.remark = this.user_info.name;
				this.$refs.remark.open();
			},
			set_remark() {
				if (this.remark.length > 10) {
					this.showToast('长度不能超过10位');
					return;
				}
				this.request({
					url: '/user/update',
					loading: true,
					data: {
						name: this.remark.trim(),
						avatarUrl: this.user_info.avatarUrl,
					},
					method: 'POST',
					loading: true,
				}).then(res => {
					if (res.status == 200) {
						this.showToast('修改成功');
						this.$store.dispatch('refresh_user');
						this.close_remark();
					}
				});
			},
			close_remark() {
				this.$refs.remark.close();
			},
			choose_wz() {
				uni.showLoading({
					mask: true,
					title: '获取位置中'
				});
				let timer = setTimeout(() => {
					uni.hideLoading();
				}, 7000);
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						clearTimeout(timer);
						uni.setStorageSync('longitude', res.longitude);
						uni.setStorageSync('latitude', res.latitude);
						this.request({
							url: '/wechatLogin/getAddress',
							data: {
								lat: res.latitude,
								lng: res.longitude,
								status: 0
							},
						}).then(res => {
							if (res.status == 200 && res.data) {
								// data: {address: "北京市海淀区北四环西路66号",…}
								// address: "北京市海淀区北四环西路66号"
								// address_component: {province: "北京市", nation: "中国", city: "北京市", street: "北四环西路", district: "海淀区",…}
								// city: "北京市"
								// district: "海淀区"
								// nation: "中国"
								// province: "北京市"
								// street: "北四环西路"
								// street_number: "北四环西路66号"
								// msg: "操作成功"
								// status: 200
								// time: "2022-08-29 15:03:35"
								this.$store.dispatch('refresh_user');
							}
						});
					},
					fail: res => {
						clearTimeout(timer);
						console.log('res', res);
						if (res && res.errMsg.indexOf('频繁调用会增加电量损耗') > -1) {
							this.showToast('频繁操作，请稍后重试');
							return;
						}
						this.showToast('请打开手机定位后重试');
					},
					complete: res => {
						clearTimeout(timer);
					}
				});

			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #EEEFF3;
	}

	.item-list-box {
		border-bottom: 2rpx solid #eeeeee;
		color: #323232;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 30rpx 30rpx 30rpx 40rpx;
		line-height: 30rpx;

	}

    .avater-box {
        padding: 20rpx!important;
        height: 150rpx;
    }

	.verify-text {
		width: 100%;
		padding: 0 30rpx;
		font-size: 28rpx;
		line-height: 88rpx;
		border-radius: 16rpx;
		background-color: #EEEEEE;
		margin-top: 30rpx;
		text-align: justify;
		height: 88rpx;
		line-height: 88rpx;
	}

	.verify-send {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 526rpx;
		height: 88rpx;
		border-radius: 16rpx;
		color: #fff;
		font-size: 32rpx;
		margin-top: 48rpx;
		margin-top: 50rpx;
	}
    .name-info {
        height: 90rpx;
        padding-top: 0;
        padding-bottom: 0;
        justify-content: space-around;
    }
    .name {
        font-weight: 700;
    }
    .send-messge {
        text-align: center;
        background: $smallBtnColor;
        color: #fff;
        margin: 40rpx 40rpx;
        padding: 20rpx 60rpx;
        border-radius: 20rpx;
    }
    .gray {
        color:#d4d5d7;
    }
    .image-box {
        height: 120rpx;
        width: 120rpx;
        border-radius: 120rpx;
        overflow: hidden;
        image {
            width: 100%;
            height: 100%;
        }
    }
</style>
